<template>
  <div>
    <el-card shadow="never">
      <header-title title="交易列表"></header-title>
    </el-card>
    <el-card shadow="never">
      <el-form ref="form" :inline="true" :model="modal">
        <el-form-item label="订单编号">
          <el-input v-model="modal.code" placeholder="请输入订单编号" size="small" style="width: 130px;"></el-input>
        </el-form-item>
        <el-form-item label="选择日期">
          <el-date-picker
            format="yyyy/MM/dd"
            value-format="yyyy/MM/dd"
            v-model="selectDate"
            :value="selectDate"
            @change="changeDate" type="daterange"
            range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
        </el-form-item>
        <el-form-item label="支付类型">
          <el-select v-model="modal.payWay" multiple placeholder="请选择支付类型" style="width: 175px;">
            <el-option label="现金" value="0"></el-option>
            <el-option label="微信" value="1"></el-option>
            <el-option label="支付宝" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="search" class="button" size="small" round icon="el-icon-search">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never">
      <div>
        <el-table :data="tradingData" v-loading="loading" style="width: 100%">
          <el-table-column type="expand">
            <template slot-scope="props">
              <!-- {{ props.row }} -->
              <el-row>
                <el-col :span="12">
                  <p class="p">
                    <b>商户名称：{{defaultValue(props.row.business_name,'暂无信息')}}</b>
                  </p>
                  <p class="p">
                    <b>商户地址：{{defaultValue(props.row.market_address,'暂无信息')}}</b>
                  </p>
                  <p class="p">
                    <b>订单编号：{{defaultValue(props.row.code,'暂无信息')}}</b>
                  </p>
                  <p class="p">
                    <b v-if="props.row.pay_way == 0">支付方式：现金</b>
                    <b v-if="props.row.pay_way == 1">支付方式：微信</b>
                    <b v-if="props.row.pay_way == 2">支付方式：支付宝</b>
                    <b v-if="props.row.pay_way == 9">支付方式：称重</b>
                  </p>
                </el-col>
                <el-col :span="12">
                  <p class="p">
                    <b>电子交易流水号：{{defaultValue(props.row.serial_number,'暂无信息')}}</b>
                  </p>
                  <p class="p">
                    <b>市场名称：{{defaultValue(props.row.market_name, '暂无信息')}}</b>
                  </p>
                  <p class="p">
                    <b>摊位号：{{defaultValue(props.row.stall_name, '暂无信息')}}</b>
                  </p>
                </el-col>
              </el-row>
              <div>
                <el-table :data="props.row.details" border style="width: 100%">
                  <el-table-column label="商品图片">
                    <template slot-scope="props">
                      <img :src="props.row.product_image" width="200" height="150"/>
                    </template>
                  </el-table-column>
                  <el-table-column prop="price" label="单价(元)"></el-table-column>
                  <el-table-column prop="weight" label="重量(kg)"></el-table-column>
                  <el-table-column prop="total" label="小计(元)"></el-table-column>
                </el-table>
              </div>
              <p style="margin-bottom: 10px; font-size: 20px; float:right; font-weight: normal;">
                总计：<span style="padding: 0 10px; color: red;">￥{{defaultValue(props.row.paid,'暂无信息')}}</span> <span style="font-size: 16px; text-decoration: line-through;">￥{{defaultValue(props.row.payable,'暂无信息')}}</span>
              </p>
            </template>
          </el-table-column>
          <el-table-column label="商户名称" prop="business_name"></el-table-column>
          <el-table-column label="订单编号" prop="code"></el-table-column>
          <el-table-column label="消费者" prop="membership_name"></el-table-column>
          <el-table-column label="消费金额(元)" prop="receivable"></el-table-column>
          <el-table-column label="购买时间" prop="start_time"></el-table-column>
          <el-table-column label="商品数量" prop="details_count"></el-table-column>
          <div slot="empty"><img src="../../../assets/blank_tip_page/blank_tip_page.png" alt=""></div>
        </el-table>
        <el-row>
          <el-col :span="2">
            <div style="padding-top: 21px;">共 <span style="color: #64d9d6;">{{tradingPage.total}}</span> 条</div>
          </el-col>
          <el-col :span="12">
            <el-pagination
              :page-count="tradingPage.lastPage"
              :page-size="tradingPage.size"
              :current-page="tradingPage.current"
              @current-change="changeTradingPage"
              style="margin-top: 15px;"
              background
              layout="total, prev, pager, next"
            ></el-pagination>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
import HeaderTitle from "@/components/HeaderTitle"
import { isNil, formatDate, formatDate2 } from "@/utils"
import moment from 'moment'

// 当月第一天和最后一天
let startDateInit = moment().startOf('month').format('YYYY-MM-DD')
let endDateInit = moment(formatDate2(new Date()).slice(0,7)).endOf('month').format('YYYY-MM-DD')

export default {
  name: "newTradingList",
  components: {
    HeaderTitle
  },
  data(){
    return {
      loading: true,
      marketId: 0,
      selectDate: [startDateInit, endDateInit],
      businessId: 0,
      modal: {
        startDate: '',
        endDate: '',
        payWay: [],
        code: ''
      },
      tradingData: [],
      tradingPage: {
        current: 1,
        size: 10,
        total: 0,
        lastPage: 0
      }
    }
  },
  watch: {
    '$store.state.app.marketId'(val, oldVal){
      this.marketId = val
      this.getTradingList(
        this.marketId,
        this.businessId,
        this.modal.code,
        this.modal.startDate,
        this.modal.endDate,
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.tradingPage.size,
        this.tradingPage.current
      )
    }
  },
  mounted(){
    //    const query = this.$route.query

    this.marketId = this.$route.query.marketId
    this.businessId = this.$route.query.businessId

    this.modal.payWay = this.$route.query.payWay ? this.$route.query.payWay : []
    if (typeof this.$route.query.payWay === 'string') {
      if(this.$route.query.payWay === ''){
        this.modal.payWay = []
      }else{
        this.modal.payWay = this.$route.query.payWay.split(',')
      }
    }

    const firstSelectDate = this.$route.query.startDate ? this.$route.query.startDate : startDateInit
    const secondSelectDate = this.$route.query.endDate ? this.$route.query.endDate : endDateInit

    this.selectDate = [firstSelectDate, secondSelectDate]

    this.modal.startDate = this.$route.query.startDate ? this.$route.query.startDate : startDateInit
    this.modal.endDate = this.$route.query.endDate ? this.$route.query.endDate : endDateInit


    // 获取 交易列表
    this.getTradingList(
      this.marketId,
      this.businessId,
      this.modal.code,
      this.modal.startDate,
      this.modal.endDate,
      this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
      this.tradingPage.size,
      this.tradingPage.current
    )
  },
  methods: {
    defaultValue (value, defaultValue) {
      if (isNil(value)) {
        return defaultValue
      }
      return value
    },
    changeDate(date){
      if(date === null){
        this.modal.startDate = ''
        this.modal.endDate = ''
      }else{
        this.modal.startDate = formatDate2(date[0])
        this.modal.endDate = formatDate2(date[1])
      }
    },
    search(){
      this.tradingPage.current = 1
      this.getTradingList(
        this.marketId,
        this.businessId,
        this.modal.code,
        this.modal.startDate,
        this.modal.endDate,
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.tradingPage.size,
        this.tradingPage.current
      )
    },
    getTradingList(marketId,businessId,code,startDate,endDate,payWay,perPage,page){
      this.$store.dispatch('operating/fetchTradingData',{
        marketId,businessId,code,startDate,endDate,payWay,perPage,page
      }).then(
        data => {
          this.loading = false
          for (let i = 0; i < data.Items.length; i++) {
            data.Items[i].receivable = (data.Items[i].receivable === '-' ? data.Items[i].receivable : (data.Items[i].receivable / 100))
            data.Items[i].paid = (data.Items[i].paid / 100).toFixed(2)
            data.Items[i].payable = (data.Items[i].payable / 100).toFixed(2)
            for (let j = 0; j < data.Items[i].details.length; j++) {
              data.Items[i].details[j].price = data.Items[i].details[j].price / 100
              data.Items[i].details[j].total = data.Items[i].details[j].total / 100
              data.Items[i].details[j].weight = data.Items[i].details[j].weight / 1000
            }
          }
          this.tradingData = data.Items
          this.tradingPage.total = data.total
          this.tradingPage.lastPage = data.lastPage
        }
      ).catch(err => {
        this.loading = false
        this.tradingData = []
        this.tradingPage.total = 0
      })
    },
    changeTradingPage(num){
      this.tradingPage.current = num
      this.getTradingList(
        this.marketId,
        this.businessId,
        this.modal.code,
        this.modal.startDate,
        this.modal.endDate,
        this.modal.payWay === [] ? '' : this.modal.payWay.join(','),
        this.tradingPage.size,
        this.tradingPage.current
      )
    }
  }
}
</script>

<style lang="scss" scoped>
  /deep/ .el-table__empty-text{
    width: 100%;
  }
.button {
  background: #64d9d6;
  color: #fff;
  margin-left: 40px;
}
.el-form-item {
  margin-bottom: 0;
}
</style>
